import React, { useEffect, useState } from 'react'

export default function EffectCom() {
  //声明状态
  let [count, setCount] = useState(500);
  let [count2, setCount2] = useState(10000);
  //调用 useEffect
  //该回调函数, 会在组件挂载完成以及组件更新完成之后自动执行
  //相当于 componentDidMount 和 componentDidUpdate 的组合
  useEffect(() => {
    console.log('运行啦~~~');
  });

  //该回调函数, 只会在组件挂载完成之后执行, 相当于 componentDidMount
  useEffect(() => { 
    console.log('组件完成了挂载   ');

    //返回一个函数, 即可模拟 componentWillUnmount 的功能
    return () => {
      console.log('组件将要卸载');
    }
  }, []); // useEffect 第二个参数, 是回调函数运行的『依赖项』

  //该回调函数, 会在组件挂载完毕之后, 以及count状态改变之后, 自动执行
  useEffect(() => {
    console.log('run run run');
  }, [count]);// 

  //useEffect 可以在函数式组件中, 多次调用

  
  return (
    <div>
      <h2>count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>新增</button>
      <hr />
      <h3>count2: {count2}</h3>
      <button onClick={() => setCount2(count2 + 1)}>新增2</button>
    </div>
  )
}
